page-home {
  * {
    margin: 0;
    padding: 0;
  }

  .tool {
    
    button {
      width: 1.7rem;
      height: 1.7rem;
      right: 18px;
      color: #fff;
      float: right;
    }
  }
  .tool img:active {
    width: 1.9rem;
    height: 1.9rem;
  }
  .albums-wrap {
    overflow: auto;
    width: 400px;
    margin: 50px auto;
    ul {
      list-style: none;
      overflow-x: scroll;
      height: 400px;
      white-space: nowrap;
      font-size: 0;
      li {
        position: relative;
        display: inline-block;
        margin-left: 30px;
        width: 260px;
        height: 400px;
        background-color: rgb(196, 190, 190);
        p {
          display: block;
          height: 40px;
          line-height: 40px;
          text-align: center;
          padding-left: 10px;
          background-color: #fff;
          color: rgb(62, 85, 231);
          font-size: 14px;
        }
        .del-album {
          display: none;
          position: absolute;
          width: 30px;
          height: 30px;
          top: 2px;
          right: 2px;
          border-radius: 15px;
        }
        .bg {
          position: absolute;
          height: 60%;
          width: 100%;
          top: 20%;
          background-size: 70%;
          background-repeat: no-repeat;
          background-position: center;
          
          // img {
          //   max-width: 100%;
          //   height: 100%;
          //   margin: auto;
          //   display: block;
          // }
        }
      }
      .kb {
        height: 100%;
        background-color: #fff;
        div {
          height: 100%;
          background-image: url(../assets/imgs/kb.png);
          background-size: 70%;
          background-repeat: no-repeat;
          background-position: center;
        }
      }
    }
  }
  .try {
    display: block;
    width: 290px;
    height: 40px;
    margin: 100px auto;
    line-height: 40px;
    border-radius: 20px;
    text-align: center;
    background-color: #16cff0;
    color: #fff;
    letter-spacing: 2px;    
  }
}


@media (max-width: 375px) {
  page-home {
    .albums-wrap {
      width: 350px;
      margin: 40px auto;
      ul {
        height: 350px;
        li {
          height: 350px;
          .bg {
            img {
            }
          }
        }
        .kb {
          div {
          }
        }
      }
    }
    .try {
      width: 270px;
      margin: 40px auto;
    }
  }
}

@media (max-width: 320px) {
  page-home {
    .albums-wrap {
      width: 300px;
      margin: 20px auto;
    
      ul {
        height: 320px;
        li {
          height: 320px;
          .bg {
            img {
            }
          }
        }
        .kb {
          div {
          }
        }
      }
    }
    .try {
      width: 250px;
      margin: 20px auto;
    }
  }
}